/**=========================================================
 * Module: skycons.js
 * Include any animated weather icon from Skycons
 =========================================================*/

App.directive('skycon', function(){
    'use strict';
    
    return {
        restrict: 'A',
        scope: {
            icon: '='
        },
        link: function($scope, $element, $attrs) {
      
            var skycons = new Skycons({'color': ($attrs.color || 'white')});

            $element.html('<canvas width="' + $attrs.width + '" height="' + $attrs.height + '"></canvas>');
            
            $scope.$watch("icon", 
                function (newVal, oldVal) {
                    var result;
                    if (newVal != undefined){
                        if (newVal == '晴'){
                            result = 'clear-day';
                        }else if (newVal == '多云' || newVal == '阴'){
                            result = 'cloudy';
                        }else if (newVal == '雨夹雪'){
                            result = 'sleet';
                        }else if (newVal.indexOf('雨') >= 0){
                            result = 'rain'
                        }else if (newVal.indexOf('雪') >= 0){
                            result = 'snow'
                        }else if (newVal == '雾' || newVal == '霾'){
                            result = 'fog'
                        }
                    }
                    
                    skycons.add($element.children()[0], result);
                    skycons.play();
                }
            );
        }
    };
});